<template>
  <div class="goods-details">
    <div class="details-header border-bottom">
      <div class="back-icon" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="header-img-wrapper">
        <swiper :options="swiperOption">
          <swiper-slide v-for="item of imgList" :key="item.id">
            <img :src="item.url" class="swiper-img">
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev">
             <i class="el-icon-arrow-left"></i>
          </div>
          <div class="swiper-button-next" slot="button-next">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="info-wrapper border-bottom">
        <div class="info-title">
          <span>
            星火高等数学 同济七版上册下册 无损好书
          </span>
          <p class="remark">
            全新的啦，有买错，不放过。
          </p>
        </div>
        <div class="info-price">
          <span>￥<span class="price">12</span></span>
          <div class="price-tag">
            <span>福利价</span>
          </div>
        </div>
      </div>
      <div class="info-introduce">
        <div class="intro-title border-bottom">
          <span>商品信息</span>
        </div>
        <div class="intro-content">
          <p>
            高等数学是工科类各专业的重要基础课程，也是硕士研究生入学考试的重点科目,其重要性日益凸显。
          </p>
          <p>
            《高等数学辅导》由教育部考试中心数学阅卷组长张天德老师精心编写。
          </p>
        </div>
      </div>
    </div>
    <div class="details-footer border-top" @click="showBox">
      <div class="purchase">
        <span>立即购买</span>
        <span class="iconfont">&#xe61d;</span>
      </div>
    </div>
    <div class="goods-choose border-top" v-if="visible">
      <div class="close-btn" @click="closeBox">
        <i class="el-icon-circle-close"></i>
      </div>
      <!--选择商品属性-->
      <div class="goods-attr">
        <div class="info">
          <div class="img-wrapper">
            <img src="http://www.gstate.cn/static/img/math1.fafa4e2.jpg">
          </div>
          <div class="goods-info">
            <span>
              ￥ <span> {{ this.goods_price }}</span>
            </span>
            <p>请选择商品属性</p>
          </div>
        </div>
        <div class="types">
          <div class="types-label">
            <span>物品</span>
          </div>
          <el-radio-group @change="showTag" v-model="chooseType"  size="mini">
            <el-radio-button label="大一上册"></el-radio-button>
            <el-radio-button label="大一下册"></el-radio-button>
            <el-radio-button label="大二上册"></el-radio-button>
            <el-radio-button label="大二下册"></el-radio-button>
          </el-radio-group>
       </div>
        <div class="account">
          <div class="account-label">
            <span>数量</span>
          </div>
          <el-input-number @change="showNum" size="mini" v-model="account" :min="1" :step="1"></el-input-number>
        </div>
      </div>

      <!--加入购物车&& 购买-->
      <div :class="['pay',isGoodsHasAttr ? 'go-pay' : '','border-top']">
        <span @click="pushCart">加入购物车</span>
        <span :class="[isGoodsHasAttr ? 'go-pay' : '']"
              @click="goPurchase">
          去结算
        </span >
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Goods_details",
    data () {
      return {
        visible: false,
        swiperOption: {
          pagination:{
            el: '.swiper-pagination'
          },
          loop: true,
          autoplay: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        imgList: [
          {
            id: '01',
            url: 'http://www.gstate.cn/static/img/math2.30b318a.jpg'
          },
          {
            id: '02',
            url: 'http://www.gstate.cn/static/img/math1.fafa4e2.jpg'
          },
          {
            id: '03',
            url: 'http://www.gstate.cn/static/img/math.4d035ec.jpg'
          }
        ],
        account: 1,
        chooseType: '',
        goods_price: this.$store.state.money,
        chooseNum: '1',
        chooseTag: '',
        goods_attr: [],
        hasAttr: false
      }
    },
    computed: {
      isGoodsHasAttr () {
        const tags =this.chooseTag
        if (tags === "") {
          this.hasAttr = false
        }else {
          this.hasAttr = true
        }
        return this.hasAttr
      }
    },
    methods: {
      showNum (value) {
        this.chooseNum = value
      },
      showTag (label) {
        this.chooseTag = label
      },
      //获取商品属性
      getAttr () {
        this.goods_attr = []
        const curPrice = this.goods_price
        const num = this.chooseNum
        const tag = this.chooseTag
        const allPrice = curPrice * num
        const info =this.goods_attr
        info.push({
          'currentPrice':curPrice,
          'amount':num,
          'allPrice':allPrice,
          'tag':tag
        })
      },
      //加入购物车
      pushCart () {
        if (this.isGoodsHasAttr) {
          this.getAttr();
          console.log(this.goods_attr)
          this.$store.state.cart.push(this.goods_attr)
          console.log(this.$store.state.cart)
        }else {
          this.$notify({
            title: '警告',
            message: '请选择商品属性',
            type: 'warning'
          });
        }
      },
      // 购买
      goPurchase () {
        this.getAttr();
        this.$router.push('/purchase');
      },
      //返回
      goBack () {
        this.$router.push('/mall')
      },
      showBox () {
        this.visible = !this.visible
        this.noScroll()

      },
      closeBox () {
        this.visible = !this.visible
      }
      // goPurchase () {
      //   this.$router.push('/purchase')
      // }
    }
  }
</script>

<style lang="stylus" scoped>
  /* header */
  .details-header {
    position: relative;
  }
  .back-icon {
    position: absolute;
    z-index: 3
    width: 2rem;
    height: 2rem;
    margin: 10px 0 0 10px;
    padding: 0.1rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 2rem;

  }
  .details-header >>> .swiper-button-next, .swiper-button-prev
    background: rgba(229, 229, 229, .6);
  .details-header >>> .swiper-pagination-bullet-active
    background : #fff
  .details-header >>>.swiper-pagination-bullets
    bottom 18px
  .details-header
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 100%
    background: #eee
    .swiper-img
      width: 100%
    .swiper-button-prev .el-icon-arrow-left, .swiper-button-next .el-icon-arrow-right
      font-size: 27px;
      position: relative;
      top: 0.5rem;
      left: 0.1rem;
      color: #333;
    .el-icon-arrow-right
      left: .1rem;
  .content-wrapper {
    margin-bottom: 50px
  }
  .info-wrapper {
    padding: 10px 15px;
    font-family: sans-serif;
  }
  .info-title span{
    font-size: 18px;
    font-weight 600;
  }
  .info-title p {
    margin: 10px 0;
    font-size: 14px;
    color: #666;
    font-weight: 500;
  }
  .info-price {
    display: flex;
  }
  .info-price span{
    color: #f00;
    font-size: 14px
  }
  .info-price span.price{
    font-size: 24px
  }
  .price-tag {
    line-height: 27px;
    margin-left: 10px
  }
  .price-tag span{
    padding: .1rem;
    font-size: 10px;
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
    border-radius: 3px;
  }
  .intro-content {
    padding: 10px 15px;
  }
  .intro-content p {
    color: #333;
    font-size: 16px;
    font-weight: 300;
    font-family: sans-serif;
    line-height: 25px;
    letter-spacing: 1px;
  }
  /* 购买 */
  .goods-choose >>> .el-radio-button--mini .el-radio-button__inner {
    padding: 7px 10px;
  }

  .details-footer, .pay{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .pay {
    display: flex
  }
  .pay span {
    flex:1;
    padding: 12px 0;
  }
  .pay span:first-child {
    background: #6decbd;
    color: #fff;
  }
  .pay span:last-child {
    background: #f8f8f8;
    color: #848383
  }
  .details-footer .purchase, .goods-choose .pay{
    text-align: center;
    font-size: 18px;
    font-family: sans-serif;
    font-weight: 400;
    z-index: 999999;
  }
  .details-footer .purchase {
    padding: 12px 0
    background: #fff;
    color: #ff3a3a;
  }
  .goods-choose {
    z-index: 999;
  }

  .goods-choose span.go-pay {
    background: #f9604e;
    color: #fff;
  }
  .intro-title {
    padding: 10px 15px;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    color: #555;
  }
  .intro-title span {
    border-left: 2px solid #ff3a3a;
    padding-left: 5px;
  }
  /* 选择商品属性 */
  .goods-choose {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: #fff;
  }
  .goods-attr .info {
    display: flex;
  }
  .goods-attr .info .img-wrapper {
    width: 25%;
    padding: 10px;
  }
  .goods-attr .info .goods-info {
    padding: 10px 0;
  }
  .goods-attr .info .goods-info span span {
    font-size: 18px;
    font-family: sans-serif;
    font-weight: 600;
    color: #ff3a3a;
  }
  .goods-attr .info .goods-info span {
    font-size: 12px;
    color: #333;
    font-weight: 500;
  }
  .goods-attr .info .goods-info p{
    margin: 10px 0 0;
    font-weight: 400;
    color: #666;
    font-size: 14px;
  }

  .img-wrapper img {
    width: 100%;
  }
  .account {
    padding: 0 10px;
  }
  .types-label {
    padding-bottom: 10px;
    color: #333;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
  }
  .account-label {
    padding: 10px 0;
    color: #333;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
  }
  .goods-attr .types {
    padding: 10px;
  }
  .close-btn {
    float: right;
    margin: 5px 5px 0 0;
  }
  .el-icon-circle-close {
    color: rgba(0, 0, 0, 0.1);
    font-size: 18px;
  }
</style>
